Complete Internationalization (i18n) Support

Overview

Added comprehensive multi-language internationalization support to the Markpad application, supporting 10 languages with automatic OS language detection.

Supported Languages

Key Changes

1. Core Translation System (src/lib/utils/i18n.ts)

• Added LanguageCode type definition supporting 10 language codes
• Created complete translations object with the following categories:
  • settings - All settings page text
  • menu - Menu items (File, Edit, View, Help, etc.)
  • toast - Toast notifications
  • modal - Dialog text
  • home - Home page text
  • editor - Editor status bar
  • tooltip - Tooltip text
  • theme - Theme options
  • installer/uninstaller - Installer/Uninstaller text
  • tabs - Tab labels
  • common - Common buttons
• Implemented t() translation function with nested key support
• Added getSupportedLanguages() function to retrieve supported languages

2. Settings Store (src/lib/stores/settings.svelte.ts)

• Updated LanguageCode type and SUPPORTED_LANGUAGES array
• Added detectSystemLanguage() function for automatic OS language detection
• Auto-detect system language on first launch (using browser navigator.language)
• Save user-selected language to localStorage

3. Component Updates

TitleBar.svelte

• Added currentLanguage reactive state
• Used $effect to sync with settings.language changes
• All menu items use t() function for translation

Editor.svelte

• Added uiLanguage reactive state
• Monaco Editor custom actions (Toggle Minimap, Toggle Word Wrap, etc.) labels support multi-language
• Command palette action labels internationalized

Settings.svelte

• All settings page labels and options support multi-language
• Language dropdown displays native language names
• Theme options (Follow System/Default Light/Default Dark) support multi-language
• Word wrap options (Off/Window/Column) support multi-language
• Import button supports multi-language

Tab.svelte

• Tab context menu supports multi-language
• Includes: Close, Close Others, Close Tabs to Right, Rename, Show in Folder, etc.

MarkdownViewer.svelte

• Right-click context menu supports multi-language
• Includes: Copy Reference, Save Image As, Save Diagram as SVG, etc.
• Fixed untranslated menu items like "Copy Reference"

Technical Implementation Details

Svelte 5 Reactivity Pattern

// Using $state and $effect for instant language switching
let currentLanguage = $state(settings.language);

$effect(() => {
    currentLanguage = settings.language;
});

// Translation usage
{t('menu.selectAll', currentLanguage)}

Automatic Language Detection

function detectSystemLanguage(): LanguageCode {
    if (typeof navigator !== 'undefined') {
        const browserLang = navigator.language.toLowerCase();
        if (browserLang.startsWith('zh')) {
            if (browserLang === 'zh-tw' || browserLang === 'zh-hk') return 'zh-TW';
            return 'zh-CN';
        }
        // ... other language detection
    }
    return 'en';
}

Testing Checklist

• Translation completeness check for 10 languages
• Language switching takes effect immediately
• First launch auto-detects system language
• All settings page options display correctly
• All menu items (TitleBar, Tab, MarkdownViewer) translated
• Monaco Editor custom action labels translated
• Language selection dropdown displays nativeName

Notes

• macOS native menu bar and Monaco Editor built-in command palette (F1) localization require separate configuration, not covered in this PR
• Translation text based on professional localization standards to ensure natural expression in each language

Files Modified

• src/lib/utils/i18n.ts - Core translation system
• src/lib/stores/settings.svelte.ts - Settings store with language detection
• src/lib/components/TitleBar.svelte - Title bar menus
• src/lib/components/Editor.svelte - Editor actions
• src/lib/components/Settings.svelte - Settings page
• src/lib/components/Tab.svelte - Tab context menus
• src/lib/MarkdownViewer.svelte - Markdown viewer context menus